// components/custom-dropdown-menu/index.js
Component({

    /**
     * 组件的属性列表
     */
    properties: {
        // 筛选可视化高度
        height: {
            type: String | Number,
            value: 0
        },
        // 蒙版
        maskFlag: {
            type: Boolean,
            value: false
        },
        // 自定义筛选类目
        options: {
            type: Array,
            value: ['品牌', '分类', '品种', '筛选']
        },
        // 筛选历史
        history: {
            type: Array,
            value: [],
            observer: 'onHistoryChange'
        },
        // 筛选类目内容
        columns: {
            type: Array,
            value: []
        },
        priceData: {
            type: Object,
            value: {

            }
        },
        ondeliteChange: {
            type: Function,
            value: () => {}
        }
    },
 
    observers: {
        'columns': function (newVal, oldVal) {
            console.log('1',newVal)
            let index1List = []
            let index2List = []
            let index3List = []
            let info1List = []
            let info2List = []
            let info3List = []
            newVal.forEach((item, index) => {
                if (item.type == 3 && item.checked == true) {
                    index1List.push(index)
                    info1List.push(item)
                }
                if (item.type == 2 && item.checked == true) {
                    index2List.push(index)
                    info2List.push(item)
                }
                if (item.type == 1 && item.checked == true) {
                    index3List.push(index)
                    info3List.push(item)
                }
            })
            if (this.data.allSelectIndex[0].selActive.length < 1) {
                this.data.allSelectIndex[0].selActive = index1List
                this.data.allSelectIndex[0].selectInfo = info1List
            }
            if (this.data.allSelectIndex[1].selActive.length < 1) {
                this.data.allSelectIndex[1].selActive = index2List
                this.data.allSelectIndex[1].selectInfo = info2List
            }
            if (this.data.allSelectIndex[2].selActive.length < 1) {
                this.data.allSelectIndex[2].selActive = index3List
                this.data.allSelectIndex[2].selectInfo = info3List
            }
            this.setData({
                allSelectIndex: this.data.allSelectIndex
            })
            // 在这里可以执行相应的逻辑操作
        }
    },
    /**
     * 组件的初始数据
     */
    data: {
        active: -1,
        globalArray: [],
        isFinite: false,
        // selActive: -1,
        // selectInfo: "", // 选择内容对象
        selectedIdx: -1, // 初始化选中索引
        selActive: [], // 存储选中的索引值
        selectInfo: [], // 存储选中的信息
        
        allSelectIndex: [{
            selActive: [],
            selectInfo: []
        }, {
            selActive: [],
            selectInfo: []
        }, {
            selActive: [],
            selectInfo: []
        }, {
            selActive: [],
            selectInfo: []
        }]
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 进口商品
        onSwitchChange(e) {
            const value = e.detail.value;
            this.triggerEvent('switchChange', {
                value
            });
        },
        // 价格
        onInputLowPrice(e) {
            console.log('输入', e)
            const lowPrice = e.detail.value;
            this.triggerEvent('inputLowPrice', {
                lowPrice
            });
        },
        onInputHighPrice(e) {
            const highPrice = e.detail.value;
            this.triggerEvent('inputHighPrice', {
                highPrice
            });
        },
        onHistoryChange(newVal, oldVal) {
            console.log('进---------', this.data.history)

            let hasValue = false;

            if (this.data.history.length === 0) {
                this.setData({
                    isFinite: false
                });
            } else {
                this.data.history.forEach(element => {
                    if (element.data.length > 0) {
                        hasValue = true;
                    }
                });

                this.setData({
                    isFinite: hasValue
                });
            }
            // if (value.type == 3) {
            //   this.data.allSelectIndex[0].selectInfo = this.data.allSelectIndex[0].selectInfo.filter(item => item.brandid != value.brandid)
            //   this.data.allSelectIndex[0].selActive = this.data.allSelectIndex[0].selActive.filter((item, itemIndex) => itemIndex != index)
            //   console.log("this.data.allSelectIndex[0]", this.data.allSelectIndex[0])
            // } else if (value.type == 2) {
            //   this.data.allSelectIndex[1].selectInfo = this.data.allSelectIndex[1].selectInfo.filter(item => item.id != value.id)
            //   this.data.allSelectIndex[1].selActive = this.data.allSelectIndex[1].selActive.filter((item, itemIndex) => itemIndex != index)
            // } else if (value.type == 1) {
            //   this.data.allSelectIndex[2].selectInfo = this.data.allSelectIndex[2].selectInfo.filter(item => item.id != value.id)
            //   this.data.allSelectIndex[2].selActive = this.data.allSelectIndex[2].selActive.filter((item, itemIndex) => itemIndex != index)
            // }
            // this.setData({
            //   allSelectIndex: this.data.allSelectIndex
            // })
            const columns = this.data.columns;
            const history = this.data.history;
            console.log('columns', columns)
            console.log('history', history)
            const selectedIdx = columns.findIndex(item => history.some(h => parseInt(h.id) === item.brandid));
            this.setData({
                selectedIdx: selectedIdx
            });
        },
        /**
         * Tab切换筛选列表回调函数方法
         * @param {*} e 
         */
        tab(e) {
            var that = this;
            const {
                index
            } = e.currentTarget.dataset
            console.log('e', e)
            console.log('this.data.allSelectIndex', this.data.allSelectIndex)
            console.log(index, this.data.columns)
            let selActive = this.data.allSelectIndex[index].selActive
            this.data.columns.map((item, index) => {
                item.checked = false;
                if (selActive.includes(index)) {
                    item.checked = true;
                }
            })

            that.setData({
                maskFlag: true,
                active: index,
                allSelectIndex: this.data.allSelectIndex,
                columns: this.data.columns
            });
            console.log('this.data.allSelectIndex111', this.data.allSelectIndex)
            console.log('columns', this.data.columns)
            that.triggerEvent('onTabs', index)
        },

        // mask隐藏
        maskClick() {
            var that = this;
            that.setData({
                maskFlag: false,
                active: -1
            });
            that.triggerEvent('onmaskClick', false)
        },

        // 阻止事件冒泡
        prevent() {},
        /**
         * 赛选内容选择
         * @param {*} e 
         */

        onChange(e) {
            console.log(this.data.allSelectIndex[this.data.active])
            console.log(e.currentTarget.dataset)
            const {
                index,
                value
            } = e.currentTarget.dataset;

            let selActive = Array.from(this.data.allSelectIndex[this.data.active].selActive); // 复制一份当前选中的索引数组
            let selectInfo = Array.from(this.data.allSelectIndex[this.data.active].selectInfo); // 复制一份当前选中的信息数组

            // 将索引值转换为字符串类型
            const strIndex = index

            // 判断当前点击的索引是否已经选中，如果已选中则取消选中，否则添加到选中数组中
            if (selActive.includes(strIndex)) {
                selActive = selActive.filter(item => item !== strIndex);
                if (this.data.active == 0) {
                    selectInfo = selectInfo.filter(item => item.brandid !== value.brandid);
                } else {
                    selectInfo = selectInfo.filter(item => item.id !== value.id);
                }
            } else {
                selActive.push(strIndex);
                selectInfo.push(value);
            }

            this.data.columns.map((item, index) => {
                item.checked = false;
                if (selActive.includes(index)) {
                    item.checked = true;
                }
            })

            console.log('当前选中的索引数组:', selActive, selectInfo); // 打印当前选中的索引数组，用于调试
            this.data.allSelectIndex[this.data.active].selActive = selActive
            this.data.allSelectIndex[this.data.active].selectInfo = selectInfo
            this.setData({
                allSelectIndex: this.data.allSelectIndex,
                columns: this.data.columns
            });
            console.log(this.data.allSelectIndex[this.data.active])
        },

        /**
         * 标签删除
         * @param {*} e 
         */
        ondeliteChange(e) {
            console.log('标签删除', e);
            console.log(this.data.allSelectIndex)
            const {
                index,
                value
            } = e.currentTarget.dataset
            console.log(index)
            if (value.type == 3) {
                this.data.allSelectIndex[0].selectInfo = this.data.allSelectIndex[0].selectInfo.filter(item => item.brandid != value.brandid)
                this.data.allSelectIndex[0].selActive = this.data.allSelectIndex[0].selActive.filter((item, itemIndex) => itemIndex != index)
                console.log("this.data.allSelectIndex[0]", this.data.allSelectIndex[0])
            } else if (value.type == 2) {
                this.data.allSelectIndex[1].selectInfo = this.data.allSelectIndex[1].selectInfo.filter(item => item.id != value.id)
                this.data.allSelectIndex[1].selActive = this.data.allSelectIndex[1].selActive.filter((item, itemIndex) => itemIndex != index)
            } else if (value.type == 1) {
                this.data.allSelectIndex[2].selectInfo = this.data.allSelectIndex[2].selectInfo.filter(item => item.id != value.id)
                this.data.allSelectIndex[2].selActive = this.data.allSelectIndex[2].selActive.filter((item, itemIndex) => itemIndex != index)
            }
            this.setData({
                allSelectIndex: this.data.allSelectIndex
            })
            console.log(this.data.allSelectIndex)
            console.log(value)
            this.triggerEvent('ondeliteChange', e.currentTarget.dataset); // 触发自定义事件，将事件继续传递给父组件
        },
        /**
         * 重置
         * @param {*} e 
         */
        reset(e) {
            const id = e.target.dataset.id;
            if (!this.data.globalArray.includes(id)) {
              this.data.globalArray.push(id);
              console.log('**', this.data.globalArray.length);
            }
            console.log(e.target.dataset.id, this.data.active);
            this.data.allSelectIndex[this.data.active].selActive = [];
            this.data.allSelectIndex[this.data.active].selectInfo = [];
            console.log('======', this.countNonEmptyEntries());
            if (this.data.globalArray.length == 3) {
                this.data.allSelectIndex.forEach(element => {
                    element.selActive = [];
                    element.selectInfo = [];
                });
            }
           
        
            this.data.columns.forEach(element => {
                element.checked = false;
            });
            console.log('columns', this.data.columns, this.data.allSelectIndex);
            this.setData({
                allSelectIndex: this.data.allSelectIndex,
                columns: this.data.columns
            });
            this.triggerEvent('onReset', e.target.dataset.id); // 触发自定义事件，通知父组件执行重置操作
        },
        
        countNonEmptyEntries() {
            let count = 0;
            this.data.allSelectIndex.forEach(item => {
                if (item.selActive.length > 0 || item.selectInfo.length > 0) {
                    count++;
                } 
            });
            return count;
        },
        /**
         * 确认
         * @param {*} e 
         */
        confirm() {
            this.setData({
                maskFlag: false,
                active: -1
            })
            this.triggerEvent('onConfirm', this.data.allSelectIndex)
        },
    },

    onLoad: function () {
        let selActive = this.data.allSelectIndex[index].selActive
        this.data.columns.map((item, index) => {
            item.checked = false;
            if (selActive.includes(index)) {
                item.checked = true;
            }
        })

        that.setData({
            allSelectIndex: this.data.allSelectIndex,
            columns: this.data.columns
        });
    }
})